<template>
  <div>
    <div class="search">
      <el-card>
        <el-form :inline="true" :model="searchParams" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="searchParams.keywords" placeholder="输入角色名称" clearable />
          </el-form-item>
          <el-form-item label="开始时间">
            <!-- <el-date-picker
              v-model="searchParams.startDate"
              type="datetime"
              placeholder="选择时间"
              clearable
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            /> -->
            <el-date-picker
              v-model="searchParams.startDate"
              type="date"
              placeholder="选择时间"
              clearable
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchParams.endDate"
              type="date"
              placeholder="选择时间"
              clearable
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getPageData">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="mytable">
      <el-card class="gongju">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-button type="primary" @click="addItemHandler()"> 添加 </el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="id" label="角色ID" width="150" />
          <el-table-column prop="name" label="角色名称" width="300" />
          <el-table-column prop="code" label="角色编码" width="120" />
          <el-table-column prop="status" label="角色状态" width="120" />
          <el-table-column prop="sort" label="排序" width="120" />
          <el-table-column prop="updateTime" label="更新时间" width="220" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="editItemHandler(row)">
                修改
              </el-button>
              <el-button link type="primary" size="small" @click="delItemHadler(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="mypage">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageParams.total"
        @change="pageChangeHandler"
      />
    </div>

    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="ruleFormInfo.title" width="800">
      <RoleForm
        ref="ruleFormRef"
        :form-data="ruleForm"
        :disabled="isSBtnDisable"
        :loading="isSBtnLoding"
        :submitForm="submitForm"
      ></RoleForm>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue'
import {
  type RolesType,
  requestGetRolesPage,
  addRole,
  editRole,
  delRole
} from '@/service/roleDataGet'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'
import RoleForm from './components/RoleForm.vue'
import { isObject } from 'lodash'

const tableData = ref<RolesType[]>()
const pageParams = ref({
  pageNum: 1, //当前页
  pageSize: 15, //每页数量
  total: 0
})

const searchParams = ref({
  keywords: '',
  startDate: '',
  endDate: ''
})

// 是否显示 Dialog
const dialogFormVisible = ref(false)
const isSBtnLoding = ref(false)
const isSBtnDisable = ref(false)
const ruleFormRef = useTemplateRef('ruleFormRef')
const ruleForm = ref<RolesType>({
  code: '',
  createTime: '',
  name: '',
  sort: 1,
  status: 1
})
const ruleFormInfo = ref<{ type: 'add' | 'edit'; title: string }>({
  type: 'add',
  title: '添加数据'
})

// const locationOptions = ['Home', 'Company', 'School']

/**
 * 提交表单
 * @param formEl 表单组件对象
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  isSBtnLoding.value = true
  isSBtnDisable.value = true

  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res

      try {
        ruleForm.value.id = Number(ruleForm.value.id)
        // 添加
        if (ruleFormInfo.value.type === 'add') {
          // http请求
          res = await addRole(ruleForm.value)
        }
        // 修改
        if (ruleFormInfo.value.type === 'edit') {
          // http请求
          res = await editRole(ruleForm.value.id, ruleForm.value)
        }

        if (res!.code !== '2000') {
          // throw new Error(ruleFormInfo.value.type === 'add'?`添加失败`:`修改失败`)
          throw new Error(isObject(res?.msg) ? (res.msg as { Message: string })?.Message : res?.msg)
        }

        ElMessage.success(ruleFormInfo.value.type === 'add' ? `添加成功` : `修改成功`)
        getPageData()
      } catch (error: any) {
        ElMessage.error(error.message)
      } finally {
        isSBtnLoding.value = false
        isSBtnDisable.value = false

        // 关闭模态框
        dialogFormVisible.value = false
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * 获取分页数据
 */
const getPageData = async () => {
  const resRoles = await requestGetRolesPage({
    // 分页参数
    pageNum: pageParams.value.pageNum,
    pageSize: pageParams.value.pageSize,
    // 检索的参数
    ...searchParams.value
  })
  console.log(resRoles, 'resRoles')

  tableData.value = resRoles.data.list
  pageParams.value.total = resRoles.data.total
}

/**
 * 添加数据
 */
const addItemHandler = async () => {
  dialogFormVisible.value = true
  // 重置表单数据
  ruleForm.value = JSON.parse(
    JSON.stringify({
      code: '',
      createTime: '',
      name: '',
      sort: 1,
      status: 1
    })
  )

  ruleFormInfo.value = {
    type: 'add',
    title: '添加角色'
  }
  ruleFormRef.value?.reset()
}

/**
 * 修改
 */
const editItemHandler = (row: RolesType) => {
  dialogFormVisible.value = true

  ruleFormInfo.value = {
    type: 'edit',
    title: '修改角色'
  }
  // 重置：填充表单
  ruleForm.value = JSON.parse(JSON.stringify(row))
  ruleFormRef.value?.reset()
}

const delItemHadler = (row: RolesType) => {
  ElMessageBox.confirm('确认删除?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        const res = await delRole(`${'324333'}`)

        if (res.code !== '2000') {
          throw new Error(res.msg)
        }

        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        getPageData()
      } catch (error: any) {
        ElMessage({
          type: 'error',
          message: error.message
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}

onMounted(() => {
  getPageData()
})
// 分页事件
const pageChangeHandler = (currentPage: number, pageSize: number) => {
  pageParams.value.pageNum = currentPage
  pageParams.value.pageSize = pageSize
  getPageData()
}
</script>

<style lang="scss" scoped>
.search {
  // border: 1px solid var(--el-border-color);
}
.mytable {
  // margin: 10px 0;
  // border: 1px solid var(--el-border-color);
}
.mypage {
  margin: 10px 0;
  // border: 1px solid var(--el-border-color);
}

.gongju {
  margin: 10px 0;
}
</style>
